{extend name="public:base"}
{block name='css'}
<link href="__PUBLIC__/css/plugins/iCheck/custom.css" rel="stylesheet">
{/block}
{block name="js"}
<script>
    function myAjaxSubmit() {
        if ($('#commentForm').hasClass('ed')) {
            return false;
        }
        var d = {};
        var t = $('#commentForm').serializeArray();
        $.each(t, function(i,n) {
            d[n.name] = n.value;
        });
        if (d.contentclass_id <= 0) {
            layer.msg('请选择内容分类');return false;
        }
        if (d.title == '') {
            layer.msg('请输入内容标题');return false;
        }

        $('#commentForm').addClass('ed');
        $.post('', $('#commentForm').serialize(), function(data){
            layer.msg(data.info);
            if (data.status == 'y') {
                setTimeout(function(){window.location.href = '{:url("index")}';},1500);
            } else {
                $('#commentForm').removeClass('ed');
            }
        }, 'json');
    }
</script>
{/block}
{block name='body'}
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>{empty name='data'}添加{else/}修改{/empty}内容</h5>
                        <a href="{:url('index')}" class="btn btn-sm btn-primary pull-right m-t-n-xs">返回</a>
                    </div>
                    <div class="ibox-content">
                        <form method="post" class="form-horizontal" id="commentForm" action="" onsubmit="myAjaxSubmit();return false;" >
                            <input type="hidden" value="{$data.id|default=''}" name="id" />
                            <input type="hidden" value="{$type}" name="type" />

                            {notempty name="data.type"}
                            <input type="hidden" value="{$data.type}" name="type" />
                            {else/}
							<div class="form-group">
                                <label class="col-sm-2 control-label">内容分类</label>
                                <div class="col-sm-8">
                                    <select class="input-sm form-control m-b" name="contentclass_id" style="margin:0px;">
                                        <option value="">请选择！</option>
										{foreach name="classList" item="li"}
                                        	<option value="{$li.id}" {if condition="!empty($data['contentclass_id']) && $li['id'] eq $data['contentclass_id']"}selected="selected"{/if}>{$li.title}</option>
										{/foreach}
									</select>
                                </div>
                            </div>
                            {/notempty}
							<div class="form-group">
                                <label class="col-sm-2 control-label">内容标题</label>
                                <div class="col-sm-8">
                                    <input type="text" name="title" value="{$data.title|default=''}" class="input-sm form-control">
                                </div>
                            </div>
							
							{if condition="$type eq 1"} <!--html 编辑器-->
							
							<div class="form-group">
                                <label class="col-sm-2 control-label">代码内容</label>
                                <div class="col-sm-10">
									<textarea id="editor" name="content" type="text/plain" style="width:900px;max-width:100%;height:300px;">{notempty name="data.content"}{$data.content|htmlspecialchars_decode}{/notempty}</textarea>
                                </div>
                            </div>
							<script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
                            <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.all.min.js"> </script>
                            <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/lang/zh-cn/zh-cn.js"></script>
							<script type="text/javascript">
								 var ue = UE.getEditor('editor');
							</script>
							
                            {elseif condition="$type eq 2"/} <!--URL-->
							
							<div class="form-group">
                                <label class="col-sm-2 control-label">Url</label>
                                <div class="col-sm-8">
                                    <input type="text" name="content" value="{$data.content|default=''}" class="input-sm form-control">
                                </div>
                            </div>
							
							{elseif condition="$type eq 3"/} <!--json-->
							
							<div class="form-group">
                                <label class="col-sm-2 control-label">JSON内容</label>
                                <div class="col-sm-8">
                                    <textarea name="content" class="input-sm form-control" style="height:150px;">{$data.content|default=''}</textarea>
                                </div>
                            </div>
							
                            {elseif condition="$type eq 4"/} <!--单图-->
							
							<div class="form-group">
                                <label class="col-sm-2 control-label">图片</label>
                                <div class="col-sm-8">
                                    <input type="file" onclick="preview(this);" class="input-sm form-control">
                                    <input type="hidden" name="img" value="{$data.content.img|default=''}">
                                    <a href="{$data.content.img|default=''}" target="_blank" {if condition='empty($data.content.img)'}style="display: none;"{/if}><img src="{$data.content.img|default=''}" style="max-width:100px;max-height:100px;"></a>
                                </div>
                            </div>

							<div class="form-group">
                                <label class="col-sm-2 control-label">图片链接地址</label>
                                <div class="col-sm-8">
                                    <input type="text" name="url" value="{$data.content.url|default=''}" class="input-sm form-control">
									<span class="help-block m-b-none">非必填！</span>
                                </div>
                            </div>

                            <script>
                                function preview(self) {
                                    $(self).unbind('change').change(function (event) {
                                        var self = this;
                                        var files = event.target.files || event.dataTransfer.files;
                                        var formData = new FormData();
                                        formData.append('imgFile', files[0]);
                                        var ajax = new XMLHttpRequest();
                                        ajax.open("POST", "{:url('index/Index/saveImg')}", true);
                                        ajax.send(formData);
                                        ajax.onreadystatechange = function () {
                                            if (ajax.readyState == 4) {
                                                if (ajax.status >= 200 && ajax.status < 300 || ajax.status == 304) {
                                                    var data = JSON.parse(ajax.responseText);
                                                    if (data.status == 'y') {
                                                        $(self).next().val(data.data.src);
                                                        $(self).next().next().attr('href', data.data.src).show().children().attr('src', data.data.src);
                                                    } else {
                                                        layer.msg(data.info);
                                                    }
                                                }
                                            }
                                        }
                                    });
                                }
                            </script>
							
                            {elseif condition="$type eq 5"/} <!--多图-->
							
							<div class="form-group">
                                <label class="col-sm-2 control-label">图片上传</label>
                                <div class="col-sm-8">
									<div class="col-sm-12" style="padding-left:0px;">
                                    	<button type="button" class="btn btn-primary" onclick="addImg();">添加图片</button>
									</div>
									
									<div class="col-sm-12 imgKj"  style="padding-left:0px;">
										<table>
                                            <tbody>
                                            {notempty name='data.content'}
                                            {foreach name="data.content" item="li" key="k"}
                                            <tr>
                                                <td>
                                                    <div class="img_info">
                                                        <img src="{$li.img}" id="up_{$k}">
                                                        <input type="hidden" name="imgs[{$k}]" value="{$li.img}" />
                                                        <input type="file" name="{$k}s" id="in_{$k}" onclick="preview(this)" accept="image/gif,image/jpeg,image/jpg,image/png">
                                                    </div>
                                                </td>
                                                <td>

                                                    <div class="input-group">
                                                        <span class="input-group-btn"><button type="button" class="btn btn-white">链接</button></span>
                                                        <input type="text" name="urls[{$k}]" value="{$li.url}" class="form-control" style="width:300px;" />
                                                    </div>
                                                    <div class="input-group m-b">
                                                        <span class="input-group-btn"><button type="button" class="btn btn-white">排序</button></span>
                                                        <input type="text" name="sorts[{$k}]" value="{$li.sort}" style="width:300px;" class="form-control">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a href="javascript:void(0);" onclick="delImgKj(this);" style="margin-left:20px;" class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i> 删除</a>
                                                </td>
                                            </tr>
                                            {/foreach}
                                            {/notempty}
                                            </tbody>
										</table>
									</div>
                                </div>
                            </div>
							<style type="text/css">
								.img_info{width:104px;height:auto;overflow:hidden;position:relative;margin:0 10px 10px 0;float:left;}
								.img_info img{width:100px;height:100px;border:1px solid #ccc;padding:1px;}
								.img_info input{width:100px;height:100px;left:0;top:0;opacity:0;position:absolute;z-index:1;cursor:pointer;padding:0;margin:0;}
								.img_info span{display:inline-block;width:100%;height:22px;line-height:22px;text-align:center;cursor:pointer;}
							</style>
							<script type="text/javascript">
                                function preview(self) {
                                    $(self).unbind('change').change(function (event) {
                                        var self = this;
                                        var files = event.target.files || event.dataTransfer.files;
                                        var formData = new FormData();
                                        formData.append('imgFile', files[0]);
                                        $(self).prev().prev().attr('src', '__PUBLIC__/img/loading.gif');
                                        var ajax = new XMLHttpRequest();
                                        ajax.open("POST", "{:url('index/Index/saveImg')}", true);
                                        ajax.send(formData);
                                        ajax.onreadystatechange = function () {
                                            $(self).prev().prev().attr('src', '__PUBLIC__/img/goods.jpg');
                                            if (ajax.readyState == 4) {
                                                if (ajax.status >= 200 && ajax.status < 300 || ajax.status == 304) {
                                                    var data = JSON.parse(ajax.responseText);
                                                    if (data.status == 'y') {
                                                        $(self).prev().val(data.data.src);
                                                        $(self).prev().prev().attr('src', data.data.src);
                                                    } else {
                                                        layer.msg(data.info);
                                                    }
                                                }
                                            }
                                        }
                                    });
                                }
								function addImg(){
									var time=new Date().getTime();
									
									var length=$('.imgKj .img_info').length;
									if(length == 10){
										layer.msg('最多添加10张图片！');return false;
									}
									
									var html = '<tr>';
									html += '		<td>';
									html += '			<div class="img_info">';
									html += '				<img src="__PUBLIC__/img/goods.jpg">';
                                    html += '				<input type="hidden" name="imgs[]"/>';
									html += '				<input type="file" onclick="preview(this)" accept="image/gif,image/jpeg,image/jpg,image/png">';
									html += '			</div>';
									html += '		</td>';
									html += '		<td>';
									html += '			<div class="input-group"><span class="input-group-btn"><button type="button" class="btn btn-white">链接</button></span><input type="text" name="urls[]" class="form-control" style="width:300px;margin-top: 0;"></div><div class="input-group m-b"><span class="input-group-btn"><button type="button" class="btn btn-white">排序</button></span><input type="number" max="9999999" name="sorts[]" style="width:300px;margin-top: 0;" class="form-control"></div>';
									html += '		</td>';
									html += '		<td>';
									html += '			<a href="javascript:void(0);" onclick="delImgKj(this);" class="btn btn-danger btn-xs delete" style="margin-left:20px;"><i class="fa fa-trash-o"></i> 删除</a>';
									html += '		</td>';
									html += '	</tr>';
										
									$('.imgKj tbody').append(html);
								}

                                function delImgKj(obj){
                                    $(obj).parents('tr').remove();
                                }
								
							</script>
							
							{/if}
							
							
							<div class="form-group">
                                <label class="col-sm-2 control-label">描述</label>
                                <div class="col-sm-8">
									<textarea name="describe" class="form-control" style="height:60px;">{$data.describe|default=''}</textarea>
                                </div>
                            </div>
							
							<div class="form-group">
                                <label class="col-sm-2 control-label">排序</label>
                                <div class="col-sm-8">
                                    <input type="number" max="9999999" name="sort" value="{$data.sort|default=0}" class="input-sm form-control" >
                                </div>
                            </div>
							
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <button class="btn btn-primary" type="submit">保存内容</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
{/block}
